<template>
	
	<div>
		<header class="navigation">
			<div><img src="../assets/rightbut.png"></div>
			<div>申请合伙人</div>
			<div></div>
		</header>
		
		<div class="partnertype">
			<div class="partnertitle">请选择合伙人</div>
			<div class="partnert_T">
				<div>
					<img src="../assets/partner/Background.png" v-show='imgshow'>
					<img src="../assets/partner/Group6.png" v-show='!imgshow'>
					<span>店铺合伙人</span>
				</div>
				<div>
					<img src="../assets/partner/Background.png" v-show='!imgshow'>
					<img src="../assets/partner/Group6.png" v-show='imgshow'>
					<span>城市合伙人</span>
				</div>
			</div>
		</div>
		
		<div class="message">请填写申请信息</div>
		
		<div class="applyforMessage">
			<div class="applyforMessage_d">
				<div>电话号码</div>
				<div><input type="tel" /></div>
			</div>
			<div class="applyforMessage_d">
				<div>店铺名称</div>
				<div><input type="text" placeholder="请输入店铺名称"/></div>
			</div>
			<div class="applyforMessage_d">
				<div>服务经理编号</div>
				<div><input type="text" placeholder="请输入服务经理编号"/></div>
			</div>
		</div>
		<div>
			<div class="uploading">上传图片</div>
			<div class="addimg">
				<div class="addimg_d" v-for="item in img" v-if='img != ""'>
					<img :src="item" />
				</div>
				<div class="add" v-if='img.length != 5'>
					<input type="file" name="" id="" value="" class="file"  @change="changeUrl" />
				</div>
			</div>
		</div>
		<div>123</div>
	</div>
	
</template>

<script>
	export default{
		data(){
			return{
				imgshow:false,
				img:[],
			}
		},
		methods:{
			changeUrl(e) {
				var _this= this
				var file = e.target.files[0];
				 var reader = new FileReader();
                  		reader.readAsDataURL(file);
//                		console.log(reader)
                  		 reader.onloadend = function () {
                  		 	var dataURL = reader.result;
                  		 	_this.img.push(dataURL);
                  		 }
           	 	
        }
		}
	}
</script>

<style scoped="scoped">
	.navigation{
		height: 1rem;
		background: #fff;
		display: flex;
		border-bottom: 1px solid #E4E4E4;
		justify-content: space-between;
		align-items: center;
		padding: 0 0.24rem;
	}
	
	.navigation img{
		width: 0.2rem;
		height: 0.36rem;
		display: block;
	}
	.partnertype{
		padding: 0 0.3rem;
	}
	.partnertitle{
		padding: 0.4rem 0;
		font-family: PingFangSC-Medium;
		font-size: 0.36rem;
		color: #333333;
		letter-spacing: 0;
	}
	.partnert_T{
		display: flex;
		font-family: PingFangSC-Regular;
		align-items: center;
		flex-direction: row;
		padding-bottom: 0.3rem;
		overflow: hidden;
	}
	.partnert_T div:last-child{
		margin-left: 1.5rem;
	}
	.partnert_T img{
		width: 0.3rem;
		height: 0.3rem;
		margin-right: 0.2rem;
		display: inline-block;
		float: left;
	}
	.partnert_T div span{
		display: inline-block;
		font-size: 0.28rem;
		color: #333333;
		letter-spacing: 0;
		line-height: 0.28rem;
		float: left;
	}
	.message{
		padding: 0.74rem 0.3rem 0.22rem 0.3rem;
		background: #F0F2F5;
		font-family: PingFangSC-Medium;
		font-size: 0.36rem;
		color: #333333;
		letter-spacing: 0;
	}
	
	.applyforMessage{
		
	}
	.applyforMessage_d{
		padding: 0.37rem 0.3rem;
		border-bottom: 1px solid #E3E3E3;
		display: flex;
		justify-content: space-between;
		flex-direction: row;
	}
	.uploading{
		padding: 0.1rem 0.3rem;
		font-family: PingFangSC-Regular;
		font-size: 0.28rem;
		color: #333333;
		letter-spacing: 0;
	}
	.addimg{
		background: #fff;
		padding: 0.2rem 0;
		overflow: hidden;
	}
	.addimg_d{
		width: 33%;
		height: 2rem;
		float:left;
	}
	.addimg_d img{
		width: 100%;
		height: 100%;
	}
	.add{
		width: 33%;
		height: 2rem;
		background-image: url(../assets/add.png);
		background-size: 100% 100%;
		margin-left: 0.25rem;
	}
	.file{
		width: 1.5rem;
		height: 4.5em;
		opacity: 0;
	}
</style>